import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
import { AppState, Settings } from "../../types";
import CodeTab from "./CodeTab";
import { Button } from "../ui/button";
import { useAppStore } from "../../store/app-store";
import { useProjectStore } from "../../store/project-store";
import { extractHtml } from "./extractHtml";
import PreviewComponent from "./PreviewComponent";
import { downloadCode } from "./download";
import styles from "./styles/preview-pane.module.less";
import IconCode from "@/assets/icons/code.svg?react";
import IconDesktop from "@/assets/icons/desktop.svg?react";
import classNames from "classnames";
import IconReset from "@/assets/icons/reset.svg?react";
import IconDownload from "@/assets/icons/download.svg?react";

interface Props {
  doUpdate: (instruction: string) => void;
  reset: () => void;
  settings: Settings;
}

function PreviewPane({ doUpdate, reset, settings }: Props) {
  const { appState } = useAppStore();
  const { inputMode, generatedCode, setGeneratedCode } = useProjectStore();

  const previewCode =
    inputMode === "video" && appState === AppState.CODING
      ? extractHtml(generatedCode)
      : generatedCode;

  return (
    <Tabs defaultValue="desktop">
      <div className={styles.head}>
        <div className={styles.btn_group}>
          {appState === AppState.CODE_READY && (
            <>
              <Button
                onClick={reset}
                className={classNames("primary-btn",styles.btn, styles.tool_btn)}
              >
                <IconReset />
                Reset
              </Button>
              <Button
                onClick={() => downloadCode(generatedCode)}
                variant="secondary"
                className={classNames("secondary-btn",styles.btn, styles.tool_btn)}
              >
                <IconDownload /> 
                Download
              </Button>
            </>
          )}
        </div>
        <div className="flex items-center">
          <TabsList>
            <TabsTrigger value="desktop" className={styles.tab_trigger}>
              <IconDesktop /> 预览
            </TabsTrigger>
            {/* <TabsTrigger value="mobile" className="flex gap-x-2">
              <FaMobile /> Mobile
            </TabsTrigger> */}
            <TabsTrigger value="code" className={styles.tab_trigger}>
              <IconCode />
              代码
            </TabsTrigger>
          </TabsList>
        </div>
      </div>
      <TabsContent value="desktop">
        <PreviewComponent
          code={previewCode}
          device="desktop"
          doUpdate={doUpdate}
        />
      </TabsContent>
      <TabsContent value="mobile">
        <PreviewComponent
          code={previewCode}
          device="mobile"
          doUpdate={doUpdate}
        />
      </TabsContent>
      <TabsContent value="code">
        <CodeTab
          code={previewCode}
          setCode={setGeneratedCode}
          settings={settings}
        />
      </TabsContent>
    </Tabs>
  );
}

export default PreviewPane;
